<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="renderer" content="webkit" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="" />
	<meta name="format-detection" content="telephone=no,email=no,adress=no" />
	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="css/test.css" />
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
	<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />

	<title>评价管理系统</title>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			overflow: auto;
		}

		body {
			background: url(images/bg.png) no-repeat left top;
			background-size: 100%;
		}

		@font-face {
			font-family: 'charts-icon';
			/* project id 750097 */
			src: url('//at.alicdn.com/t/font_750097_7vtswa9trv7.eot');
			src: url('//at.alicdn.com/t/font_750097_7vtswa9trv7.eot?#iefix') format('embedded-opentype'),
				url('//at.alicdn.com/t/font_750097_7vtswa9trv7.woff') format('woff'),
				url('//at.alicdn.com/t/font_750097_7vtswa9trv7.ttf') format('truetype'),
				url('//at.alicdn.com/t/font_750097_7vtswa9trv7.svg#iconfont') format('svg');
		}
		.zwsj{
			display:none;
		}
		.ysj{
			display:block;
		}
	</style>
</head>


<body class="homeBg homeBgDetails">
	<header class="headTop">
		<p>评价管理系统</p>
		<img src="images/back.png" onclick="javascript:history.back(-1);">
	</header>
	<section class="contentNei">
		<!-- 内容开始 -->
		<article class="homeCenter">
			<!-- 03 -->
			<div class="homeRule">
				<form action="succeed.html">
					<div class="homeRuleWhite homeRuleWhiteDeta">
						<!-- 中间的连接符 -->
						<div class="homeRuleLian"><img src="images/line.png"></div>
						<div class="homeRuleLianRight"><img src="images/line.png"></div>
					</div>

					<!-- 02 -->
					<div class="homeRuleWhite">
						<div class="detaTop">
							<ul>
								<li>
									<div class="dataTime zhong float">
										<p>筛选查询:</p>
										<div class="detaBox zhong">
											<div class="detaBoxTime">
												<div id='result' class="ui-alert">选择日期</div>
												<img src="images/down.png">
												<button id='demo6' data-options='{"type":"month"}'
													class="btn mui-btn mui-btn-block">选择月份 ...</button>
											</div>

										</div>
									</div>
								</li>
								<li>
									<div class="dataTime zhong float">
										<p>整体评价:</p>
										<div class="detaBox zhong">
											<span class='zwsj' style="font-size:14px">暂无数据</span>
											<figure class="zhong ysj">
												<img id='face' src="images/faceA.png">
												<figcaption id='appraise'>满意</figcaption>
											</figure>
										</div>
									</div>
								</li>
								<li>
									<div class="dataMan ">
										<p>满意度:</p>
										<p class='zwsj' style="text-indent:2em;">暂无数据</p>
										<div class="dataProgress ysj">
											<hgroup class="zhong">
												<p>满意</p>
												<div class="detaJin"><progress value='0' id='manyi' max='100'
														class="mypro"></progress></div>
												<p id='manyi2'>0%</p>
											</hgroup>
											<hgroup class="zhong">
												<p>一般</p>
												<div class="detaJin"><progress value='0' id='yiban' max='100'
														class="mypro"></progress></div>
												<p id='yiban2'>0%</p>
											</hgroup>
											<hgroup class="zhong">
												<p>不满意</p>
												<div class="detaJin"><progress value='0' id='bumanyi' max='100'
														class="mypro"></progress></div>
												<p id='bumanyi2'>0%</p>
											</hgroup>
										</div>
									</div>
								</li>
								<li>
									<div class="dataMan ">
										<p>不满意详情:</p>
										<p style="text-indent:2em;display:none;" class='zwsj'>暂无数据</p>
										<div class="dataManPic ysj">
											<!-- 饼图 -->
											<div class="chart-wrapper">
												<canvas id="mountNode" style="margin: 10px auto;"></canvas>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
			</div>
			</form>
		</article>
	</section>
</body>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2-all.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script>
	(function ($) {
		$.init();
		var result = $('#result')[0];
		var btns = $('.btn');
		btns.each(function (i, btn) {
			btn.addEventListener('tap', function () {
				var _self = this;
				if (_self.picker) {
					_self.picker.show(function (rs) {
						result.innerText = rs.text;
						console.log(rs.text, "1")
						year = parseInt(rs.text.split('-')[0])
						month = parseInt(rs.text.split('-')[1])
						detail();
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function (rs) {
						result.innerText = rs.text;
						console.log(rs.text, "2")
						year = parseInt(rs.text.split('-')[0])
						month = parseInt(rs.text.split('-')[1])
						detail();
						console.log(year, month)
						_self.picker.dispose();
						_self.picker = null;
					});
				}

			}, false);
		});
	})(mui);

	var cw = document.documentElement.clientWidth, ch = document.documentElement.clientWidth * 0.6;

	$('#mountNode').css({
		'width': cw * 0.7,
		'height': ch
	})

	var baseUrl = localStorage.getItem('baseUrl');
	var now = new Date();
	var month = now.getMonth() + 1;
	var year = now.getFullYear();
	var organ = JSON.parse(localStorage.getItem('organ'));
	var user = JSON.parse(localStorage.getItem('user'));
	var organId = parseInt(location.search.substring(1).split('=')[1])

	detail();

	function detail() {
		$.ajax({
			url: baseUrl + '/report/reportDetail',
			method: 'post',
			data: {
				month: month,
				year: year,
				organId: organId
			},
			success: function (res) {
				console.log("返回的数据", res)
				var data = res.data.data;
				if(!data){
					$('#manyi').val(0);
					$('#yiban').val(0);
					$('#bumanyi').val(0);

					$('#manyi2').html('0%');
					$('#yiban2').html('0%');
					$('#bumanyi2').html('0%');
					
					$('.zwsj').show();
					$('.ysj').hide();
					return;
				}		
				$('.zwsj').hide();
				$('.ysj').show();
				
				var total = data.satisfaction + data.general + data.dissatisfied;
				var manyi = (data.satisfaction / total * 100).toFixed(2);
				var yiban = (data.general / total * 100).toFixed(2);
				var bumanyi = (data.dissatisfied / total * 100).toFixed(2);
				$('#manyi').val(manyi);
				$('#yiban').val(yiban);
				$('#bumanyi').val(bumanyi);

				$('#manyi2').html(manyi + '%');
				$('#yiban2').html(yiban + '%');
				$('#bumanyi2').html(bumanyi + '%');

				var reportData = [];
				var total = 0;
				for (var j = 0; j < data.legendDatas.length; j++) {
					total += data.datavalues[j]
				}

				for (var i = 0; i < data.legendDatas.length; i++) {
					console.log(data.datavalues[i])
					reportData.push({
						item: data.legendDatas[i],
						percent: parseInt(data.datavalues[i]/total*100)//.toFixed(2)
					})
				}
				console.log("处理后的数据", reportData)

				var map = {};
				reportData.map(function (obj) {
					map[obj.item] = obj.percent + '%';
				});
				var chart = new F2.Chart({
					id: 'mountNode',
					pixelRatio: window.devicePixelRatio
				});
				chart.source(reportData);
				chart.coord('polar', {
					innerRadius: 0.4,
				});
				chart.legend({
					position: 'bottom',
					offsetY: 30,
					itemFormatter: function itemFormatter(val) {
						return val + '  ' + map[val];
					}
				});
				chart.pieLabel({
					label1: function label1(data) {
						return {
							text: data.item
						};
					},
					label2: function label2(data) {
						return {
							text: data.percent + '%'
						};
					}
				});
				chart.axis(false);
				chart.interval().position('item*percent')
					.color('item', ['#8AACCC', '#BA0D43', '#D8648E', '#69B5CB'])
					.adjust('stack')
					.shape('text');

				chart.render();

				console.log(res)
				//获取满意设置百分比
				$.ajax({
					url: baseUrl + '/rule-settings/list',
					method: 'get',
					success: function (res) {
						console.log('满意配置', res)
						var setting = res.data.item.percentage;
						$('#appraise').html(parseFloat(manyi) > parseFloat(setting) ? '满意' : '不满意')
						$('#face').attr('src', parseFloat(manyi) > parseFloat(setting) ? "images/faceA.png" : "images/c.png");
					}
				})
			}
		})
	}
	var Shape = F2.Shape;
	var Util = F2.Util;
	Shape.registerShape('polygon', 'text', {
		getPoints: function (cfg) {
			console.log(cfg)
			const x = cfg.x;
			const y = cfg.y;
			const y0 = cfg.y0;
			const width = cfg.size;
			return [
				{ x: x - width / 2, y: y0 },
				{ x: x, y: y },
				{ x: x + width / 2, y: y0 }
			]
		},
		draw: function draw(cfg, container) {
			var points = this.parsePoints(cfg.points);
			var style = {
				fill: cfg.color,
				z: true // 需要闭合
			};
			container.addShape('rect', {
				attrs: Util.mix({
					x: points[1].x,
					y: points[1].y,
					width: points[2].x - points[1].x,
					height: points[0].y - points[1].y
				}, style)
			});

			var origin = cfg.origin._origin; // 获取对应的原始数据
			return container.addShape('text', {
				attrs: {
					x: (points[1].x + points[2].x) / 1,
					y: (points[0].y + points[1].y) / 2,
					text: origin.percent,
					fill: '#fff',
					textAlign: 'center',
					textBaseline: 'middle'
				}
			});
		}
	});

	// var data = [{
	// 	item: '饭菜品种',
	// 	percent: 6
	// }, {
	// 	item: '饭菜分量',
	// 	percent: 8
	// }, {
	// 	item: '饭菜口味',
	// 	percent: 10
	// }, {
	// 	item: '卫生质量',
	// 	percent: 20
	// }];

	// var map = {};
	// data.map(function (obj) {
	// 	map[obj.item] = obj.percent + '%';
	// });
	// var chart = new F2.Chart({
	// 	id: 'mountNode',
	// 	pixelRatio: window.devicePixelRatio
	// });
	// chart.source(data);
	// chart.coord('polar', {
	// 	innerRadius: 0.4,
	// });
	// chart.legend({
	// 	position: 'bottom',
	// 	offsetY: 30,
	// 	itemFormatter: function itemFormatter(val) {
	// 		return val + '  ' + map[val];
	// 	}
	// });
	// chart.pieLabel({
	// 	label1: function label1(data) {
	// 		return {
	// 			text: data.item
	// 		};
	// 	},
	// 	label2: function label2(data) {
	// 		return {
	// 			text: data.percent + '%'
	// 		};
	// 	}
	// });
	// chart.axis(false);
	// chart.interval().position('item*percent')
	// 	.color('item', ['#8AACCC', '#BA0D43', '#D8648E', '#69B5CB'])
	// 	.adjust('stack')
	// 	.shape('text');

	// chart.render();
</script>

</html>